<template>
	<div id="comment">
		<!--<Input v-model.trim="commentInfo.content" type="textarea" placeholder="内容" :autosize="{minRows: 4,maxRows: 8}"/>
		<Row style="margin-top:10px">
			整体评价：<Rate v-model="commentInfo.level" />
			<Button 
				style="float: right;" 
				type="primary" 
				:disabled="!commentInfo.content"
				@click="addComment()">发表评价</Button>
		</Row>
		<Divider v-if="total > 0"></Divider>-->
		<template v-if="showDataList">
			<div v-for="comment in commentList">
				<p>{{comment.creatorName}}：
					<span style="float: right;" >
					 <Poptip
        				confirm
						title="确认删除？"
						@on-ok="delComment(comment.id)">
						<Button type="error" ghost size="small"> 删除 </Button>
					</Poptip>
					</span>
				</p>
				<!-- <p><Rate v-model="comment.level" disabled/></p> -->
				<p>{{comment.content}}</p>
				<p style="color:#bbb;margin-top:6px;">时间:{{comment.createTime}}</p>
				<Divider dashed style="padding:10px"></Divider>
			</div>
			<Page :total="total" show-elevator show-sizer showTotal style="text-align: center;"
				@on-change="changePage"
				@on-page-size-change = "changeSize" v-if="total > 0"/>
		</template>
		<template v-if="showDefImg">
			<no-data></no-data>
		</template>
	</div>
</template>
<script>
	import {delComment,getCommentList} from '@/api/selfStudy/courseExp.js'
    export default {
        name : 'expComment',
        components:{},
        props:['experInfo'],
        data(){
        	return {
        		commentInfo:{
					"companyId": "",
					"content": "",
					"courseId": this.$route.query.classId,
					"experimentId": "",
					"level": 5
				},
				commentList:[],
				queryCommentInfo:{
					pageIndex:1,
					pageSize:10,
					experimentId:''
				},
				total:0,
				showDataList:true,
        		showDefImg:false,
        	}
        },
        mounted(){
        	this.commentInfo.companyId = this.experInfo.companyId;
        	if(this.$route.name == 'experdetails'){
        		this.commentInfo.experimentId = this.experInfo.ecid;
        		this.queryCommentInfo.experimentId = this.experInfo.ecid;
        	}else if(this.$route.name == 'coursedetails'){
        		this.commentInfo.courseId = this.experInfo.ccid;
        		this.queryCommentInfo.courseId = this.experInfo.ccid;
        	}
        	this.getCommentList();
        },
        methods:{
        	addComment(){
        		addComment(this.commentInfo).then(res => {
        			if(data.code == 1){
        				this.getCommentList();
        			}else{
        				this.$message.error(data.message);
        			}
        		}).catch(error => {
        			
        		})
        	},
        	getCommentList(){
        		getCommentList(this.queryCommentInfo).then(data => {
        			if(data.code == 1){
								console.log(data)
        				this.commentList = data.data.items;
						this.total = data.data.total;
						if(this.commentList.length > 0){
							this.showDataList = true
							this.showDefImg = false
						}else{
							this.showDataList = false
							this.showDefImg = true
						}
        			}else{
        				this.commentList = [];
        			}
        		}).catch(error => {
        			
        		})
        	},
        	delComment(id){
        		delComment(id).then(data => {
        			if(data.code == 1){
								this.getCommentList();
								this.$Message.info('删除成功');
        			}else{
        				this.$message.error(data.message);
        			}
        		}).catch(error => {
        			
        		})
        	},
        	changePage(page){
        		this.queryCommentInfo.pageIndex = page;
        		this.getCommentList();
        	},
        	changeSize(size){
        		this.queryCommentInfo.pageSize = size;
        		this.getCommentList();
        	}
        }
   }
</script>
<style scoped>
	#comment{
		height:100%;
		font-size: 14px;
	}
</style>